<template>
  <el-container class="main" :style="mainBg">
    <!-- 头部部分 -->
    <el-header>
      <!-- 后台logo -->
      <div class="main_logo">
        <img src="../assets/img/main/main_logo.png" alt height="60px" />
      </div>
      <div class="header_right">
        <!-- 快捷按钮商店，短信，消息 -->
        <div class="mt5">
          <router-link to="/welcome">
            <el-tooltip
              class="item"
              effect="dark"
              content="首页"
              placement="bottom-start"
              :enterable="false"
            >
              <i class="el-icon-s-home"></i>
            </el-tooltip>
          </router-link>
          <router-link to>
            <el-tooltip
              class="item"
              effect="dark"
              content="商店"
              placement="bottom-start"
              :enterable="false"
            >
              <i class="el-icon-s-shop"></i>
            </el-tooltip>
          </router-link>
          <router-link to>
            <el-tooltip
              class="item"
              effect="dark"
              content="短信"
              placement="bottom-start"
              :enterable="false"
            >
              <i class="el-icon-s-comment"></i>
            </el-tooltip>
          </router-link>
          <router-link to>
            <el-tooltip
              class="item"
              effect="dark"
              content="消息"
              placement="bottom-start"
              :enterable="false"
            >
              <i class="el-icon-message-solid"></i>
            </el-tooltip>
          </router-link>
        </div>
        <!-- 个人信息下拉框 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            <img
              src="../assets/img/main/touxiang.png"
              alt
              class="mr5"
              width="33"
              height="33"
              style="border-radius: 50%"
            />
            超级管理员
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-tickets">基本信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-unlock">修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button" @click.native="logout()">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 主体部分 -->
    <el-container class="main_content">
      <!-- 左边栏部分 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <div class="box_pic_top"></div>
        <div class="aside_box_top">
          <i class="el-icon-menu mr5"></i>
          {{ iscollapse ? "" : "功能菜单" }}
        </div>
        <div class="aside_box" :style="aside_box">
          <!-- 左侧菜单显示收起按钮 -->
          <div class="iscollapse" @click="foldBtn">
            <i :class="iscollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>
          <!-- 左侧侧边栏数据 -->
          <el-menu
            background-color="#366cb9"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :collapse="iscollapse"
            :collapse-transition="false"
            :default-active="activeNav"
            router
          >
            <!-- 一级菜单栏 -->
            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
              <!-- 一级菜单栏模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="iconfont icon-users"></i>
                <!-- 文本 -->
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item
                :index="'/' + subItem.path"
                v-for="subItem in item.children"
                :key="subItem.id"
                @click="saveNavStor('/' + subItem.path)"
              >
                <!-- 二级菜单栏模板 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-menu"></i>
                  <!-- 文本 -->
                  <span>{{ subItem.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <!-- 右边栏部分 -->
      <el-main>
        <div class="box_pic_top"></div>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      //main背景图片设置
      mainBg: {
        backgroundImage:
          "url(" + require("@/assets/img/main/main_bg.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center",
        backgroundSize: "cover",
      },
      //左边背景图片设置
      aside_box: {
        backgroundImage:
          "url(" + require("@/assets/img/main/left_bg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center",
        backgroundSize: "cover",
      },
      menuList: [],
      iscollapse: false,
      // 激活菜单
      activeNav: "",
    };
  },
  created() {
    // 获取左边所有菜单
    this.getMenuList();
    // 激活菜单
    this.activeNav = window.sessionStorage.getItem("activeNav");
  },
  methods: {
    // 获取数据库中左边所有菜单栏数据
    getMenuList() {
      this.$axios
        .get("menus")
        .then((res) => {
          // then用于处于成功事件，res为服务端返回的数据

          let menusData = res.data;
          if (menusData.meta.status == 200) {
            // console.log("获取菜单成功");
            // console.log(menusData.data)
            this.menuList = menusData.data;
          } else {
            // console.log("获取菜单失败");
            this.$message.error(menusData.meta.msg);
            return;
          }
        })
        .catch((error) => {
          console.log(error); // cathch用于处理错误事件
        });
    },
    // 左侧菜单收起与展开
    foldBtn() {
      this.iscollapse = !this.iscollapse;
    },
    //菜单被激活状态
    saveNavStor(activeNav) {
      window.sessionStorage.setItem("activeNav", activeNav);
      this.activeNav = activeNav;
    },
    //退出系统
    logout() {
      this.$msgBox
        .alert("您是否确定退出系统", "提示", {
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
        .then(({ value }) => {
          // 清空当前的token的sessionStorage
          window.sessionStorage.clear();
          // 跳转到登录页面
          this.$router.push("./login");
          this.$message({
            type: "success",
            message: "您已退出系统 ",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "您已取消退出",
          });
        });
    },
  },
};
</script>

<style scoped>
.main {
  height: 100%;
  width: 100%;
  min-width: 1200px;
}
.main_content {
  margin: 5px;
  height: calc(100% - 70px);
}
/* header部分 */
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.header_right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_right a {
  color: #aad1ff;
  font-size: 18px;
  margin-right: 20px;
}
.header_right a:hover {
  color: #fff;
}
.el-dropdown-link {
  padding-left: 15px;
  position: relative;
  cursor: pointer;
  color: #aad1ff;
  font-size: 12px;
}
.el-dropdown-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 20px;
  background: #166dce;
}
/* 左边栏部分 */
.el-aside {
  margin-right: 5px;
  background: #ddd;
}
.el-menu {
  border-right: none;
}
.box_pic_top {
  border-left: 10px solid #0b4294;
  border-right: 10px solid #0b4294;
  text-align: center;
  border-bottom: 8px solid #f2f2f2;
}
.aside_box_top {
  color: #366cb9;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
  font-size: 16px;
  background: #fff;
}
.aside_box {
  height: calc(100% - 43px);
  width: 100%;
  overflow: hidden;
}
.el-submenu__title i,
.el-menu-item i {
  color: #ffffff;
}
.iscollapse {
  line-height: 35px;
  height: 35px;
  text-align: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  margin-left: -8px;
  background: #2d62ad;
}
/* 右边主体部分 */
.el-main {
  padding: 0;
  background: #fff;
  height: 100%;
}
</style>